<template>
  <div class="cart_container">
    <div class="logo">
      <div class="logo_img">
        <img src="../../assets/icon/login/login_logo.png" alt="" />
      </div>
    </div>

    <div class="main">
      <div class="main_box">
        
        <!-- <component :is="compName" @change-psw="getChangePsw"></component> -->
        <div class="component">
          <login-bar v-if="isShow" ></login-bar >
          <register-bar :flag="flag"   v-else ></register-bar>
        </div>
        <div class="info" @click="tabComponent" v-if="isShow">
          没有账号?
          <span>立即注册</span>
        </div>
        <div class="info" @click="tabComponent" v-else>
          
          <span >立即登录</span>
        </div>
      </div>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import LoginBar from "@/views/login/LoginBar.vue";
import RegisterBar from "@/views/login/RegisterBar.vue";
export default {
  name: "Login",
  data() {
    return {
     
      compName: "LoginBar",
      isShow: true,
      flag:true
    };
  },
  methods: {
    tabComponent() {
      if (this.isShow) {
      
        this.compName = "RegisterBar";
      } else {
       
        this.compName = "LoginBar";
      }

      this.isShow = !this.isShow;
    },

  
  },
  components: {
    LoginBar,
    RegisterBar,
  },
};
</script>
<style lang="scss" scoped>
.cart_container {
  width: 100%;
  height: 100vh;
  background: #000;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#eb5447),
    to(#ff8e3b)
  );
  background-image: linear-gradient(180deg, #eb5447 0, #ff8e3b);
  background-image: -moz-linear-gradient(to bottom, #eb5447 0, #ff8e3b 100%);
  .logo {
    height: 143px;
    background: url(../../assets/icon/login/bg.png) no-repeat;
    background-size: contain;
    padding-top: 55px;
    .logo_img {
      width: 82px;
      height: 82px;
      border-radius: 50%;
      overflow: hidden;
      background: #fcdfda;
      margin: 0 auto;
      > img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .main {

    margin-top:50px ;
    .main_box {
      margin: 0 auto;
      width: 304px;
      padding: 22.5px 15px 0;
      border-radius: 8px;
      background-color: #fff;
      .tab_btns {
        display: flex;
        justify-content: center;
        align-items: center;

        a {
          display: block;
          color: #999;
          font-size: 16px;

          font-weight: 700;
          padding: 0 3px 5px;
          margin: 0 16px;
        }
        a.active {
          // font-size: 17px;
          color: #282828;
          border-bottom: 2px solid #f35749;
        }
      }

      .loginBtn {
        height: 43px;
        line-height: 43px;
        font-size: 16px;
        color: #fff;
        font-weight: 700;

        border-radius: 21.5px;
        background: -webkit-gradient(
          linear,
          left top,
          right top,
          from(#f35447),
          to(#ff8e3c)
        );
        background: linear-gradient(90deg, #f35447 0, #ff8e3c);
        background: -moz-linear-gradient(to right, #f35447 0, #ff8e3c 100%);
        text-align: center;

        margin-top: 20px;
      }
      .info {
        height: 55px;
        text-align: center;
        line-height: 55px;
        font-size: 15px;
        color: #333;
        span {
          color: #fc4141;
        }
      }
    }
  }

  .bottom {
    width: 304px;
    height: 22px;
    margin: 0 auto;
    background: url(../../assets/icon/login/bottom.png) no-repeat;
    background-size: 100% 100%;
    background-position: center top;
  }
}
</style>
